<template>
  <div class="cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.product.id">
        <img :src="item.product.image" :alt="item.product.name">
        <h3>{{ item.product.name }}</h3>
        <p>数量: <input type="number" v-model="item.quantity" /></p>
        <p>总价: {{ item.product.price * item.quantity }}</p>
        <button @click="removeFromCart(item.product.id)">删除商品</button>
        <hr> <!-- 添加分隔线 -->
      </li>
    </ul>
    <p>购物车总金额: {{ totalPrice }}</p>
    <router-link to="/checkout" class="checkout-link">前往结算</router-link>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
  name: 'Cart',
  computed: {
    ...mapState(['cartItems']),
    ...mapGetters(['totalPrice'])
  },
  methods: {
    ...mapMutations(['removeFromCart'])
  }
};
</script>

<style scoped>
/* 整体购物车容器样式优化 */
.cart {
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px auto;
  width: 80%;
  max-width: 1000px;
}

/* 标题样式增强 */
.cart h2 {
  color: #343a40;
  font-size: 28px;
  font-family: 'Arial', sans-serif;
  margin-bottom: 20px;
  text-align: center;
}

/* 商品列表项内各元素样式细化 */
.cart ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cart li {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.cart li img {
  max-width: 100%;
  height: auto;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.cart li img:hover {
  transform: scale(1.1);
}

.cart li input[type="number"] {
  width: 60px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

.cart li p:last-child {
  color: #e74c3c;
  font-weight: bold;
  margin-top: 10px;
}

.cart li button {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cart li button:hover {
  background-color: #c0392b;
}

/* 购物车总金额样式突出显示 */
.cart p:last-of-type {
  color: #343a40;
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
  text-align: center;
}

/* “前往结算”链接样式优化并使其居中 */
.cart.checkout-link {
  display: block;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin: 20px auto; /* 添加这行，让按钮在水平方向自动居中 */
}

.cart.checkout-link:hover {
  background-color: #0056b3;
}

/* 分隔线样式（如果添加了分隔线元素的情况） */
.cart hr {
  border: none;
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
}
</style>